<template>
  <div class="bg-gradient-to-br backdrop-blur-sm">
    <!-- 主体内容 -->
    <div class="pt-2 pb-12">
      <div class="max-w-7xl mx-auto px-4 flex">

        <!-- 左侧导航 -->
        <div class="w-60 flex-shrink-0 space-y-4">

          <!-- 广告位轮播 -->
          <AdCarousel/>

          <div class="bg-white rounded-lg p-4 space-y-2 shadow-sm hover:shadow-md transition-shadow">
            <h3 class="text-gray-800 font-medium px-2 mb-2">联系我们</h3>
            <div class="space-y-3">
              <div class="text-gray-600 p-2 text-sm">
                <p class="flex items-center">
                  <i class="fas fa-clock mr-2 "></i>
                  <span>工作时间：09:00 - 18:00</span>
                </p>
              </div>
              <div class="text-gray-600 p-2 text-sm">
                <p class="flex items-center">
                  <i class="fas fa-phone mr-2 "></i>
                  <span>客服电话：400-888-8888</span>
                </p>
              </div>
              <div class="text-gray-600 p-2 text-sm">
                <p class="flex items-center">
                  <i class="fas fa-envelope mr-2 "></i>
                  <span>商务合作：bd@techflow.com</span>
                </p>
              </div>
              <a
                  href="#"
                  class="flex items-center space-x-3 text-gray-700 p-2 rounded hover:bg-gray-50"
              >
                <i class="fas fa-info-circle"></i>
                <span>关于我们</span>
              </a>
              <a
                  href="#"
                  class="flex items-center space-x-3 text-gray-700 p-2 rounded hover:bg-gray-50"
              >
                <i class="fas fa-handshake"></i>
                <span>商务合作</span>
              </a>
            </div>
          </div>
        </div>

        <!-- 中间内容 -->
        <div class="flex-1 min-w-0 mx-8">

          <!-- 公告轮播图 -->
          <div class="mb-8 rounded-lg overflow-hidden relative group">
            <Swiper :options="swiperOptions" ref="mySwiper" class="swiper-container" style="height: 265px">
              <SwiperSlide v-for="(slide, index) in slides()" :key="index">
                <div class="relative h-full">
                  <img
                      :src="slide.image"
                      :alt="slide.title"
                      class="w-full h-full object-cover"
                  />
                  <div
                      class="absolute inset-0 bg-gradient-to-r from-[#79c2a5]/90 to-transparent flex items-center"
                  >
                    <div class="p-8 text-white max-w-lg">
                      <h2 class="text-3xl font-bold mb-4">{{ slide.title }}</h2>
                      <p class="text-lg text-white/90">
                        {{ slide.description }}
                      </p>
                    </div>
                  </div>
                </div>
              </SwiperSlide>
            </Swiper>
          </div>

          <!-- 开源项目 -->
          <div class="mb-8">
            <div class="flex items-center justify-between mb-4">
              <h2 class="text-xl font-bold">热门开源项目</h2>
              <a href="#" class="text-[#79c2a5] hover:text-[#5cd3a3]"
              >查看更多</a
              >
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div
                  v-for="project in projects"
                  :key="project.id"
                  class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow"
              >
                <div class="flex items-start">
                  <img
                      :src="project.icon"
                      :alt="project.name"
                      class="w-12 h-12 rounded-lg"
                  />
                  <div class="ml-4 flex-1 min-w-0">
                    <h3 class="font-medium text-lg mb-1">{{ project.name }}</h3>
                    <p class="text-gray-600 text-sm mb-3">
                      {{ project.description }}
                    </p>
                    <div class="flex items-center text-sm text-gray-500">
                      <span class="flex items-center">
                        <i class="fas fa-star mr-1"></i>
                        {{ project.stars }}
                      </span>
                      <span class="mx-3">|</span>
                      <span>{{ project.language }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 精选文章 -->
          <div>
            <div class="flex items-center justify-between mb-4">
              <h2 class="text-xl font-bold">精选帖子</h2>
              <a href="#" class="text-[#79c2a5] hover:text-[#5cd3a3]">查看更多</a>
            </div>
            <div class="space-y-4">
              <button
                  v-for="article in articles"
                  :key="article.id"
                  :href="article.url"
                  class="block w-full bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow text-left"
              >
                <h3 class="text-lg font-medium mb-2 hover:text-[#91f0d0]">{{ article.title }}</h3>
                <p class="text-gray-600 mb-4 text-sm">{{ article.summary }}</p>
                <div class="flex items-center justify-between text-sm">
                  <div class="flex items-center hover:text-[#91f0d0]">
                    <img
                        :src="article.author.avatar"
                        :alt="article.author.name"
                        class="w-6 h-6 rounded-full"
                    />
                    <span class="ml-2 text-gray-600 hover:text-[#91f0d0]">{{
                        article.author.name
                      }}</span>
                  </div>
                  <div class="flex items-center space-x-4 text-gray-500">
                    <button class="flex items-center">
                      <i class="far fa-eye mr-1"></i>
                      {{ article.views }}
                    </button>
                    <button
                        @click.stop="toggleLike(article)"
                        class="flex items-center hover:text-red-500 transition-colors"
                        :class="{'text-red-500': article.liked}"
                    >
                      <i
                          class="mr-1"
                          :class="article.liked ? 'fas fa-thumbs-up' : 'far fa-thumbs-up'"
                      ></i>
                      {{ article.likes }}
                    </button>
                  </div>
                </div>
              </button>
            </div>
          </div>

        </div>

        <!-- 右侧边栏 -->
        <div class="w-80 flex-shrink-0">
          <div class="sticky top-28 space-y-6">

            <!-- 热门社团 -->
            <div class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow">
              <h3 class="text-lg font-medium mb-4">热门社团</h3>
              <div class="space-y-1">
                <button
                    v-for="community in communities"
                    :key="community.id"
                    class="flex items-start w-full p-3 rounded-lg hover:shadow-md transition-shadow focus:shadow-md"
                >
                  <img
                      :src="community.imageUrl"
                      :alt="community.title"
                      class="w-20 h-20 rounded object-cover"
                  />
                  <div class="ml-3 flex-1 min-w-0 text-left"> <!-- Added text-left here -->
                    <h4 class="font-medium mb-1 text-sm">
                      {{ community.title }}
                    </h4>
                    <div class="w-full h-px bg-gray-300 my-2"></div>
                    <p class="text-gray-600 text-xs">
                      简介: {{ community.description }}
                    </p>
                    <p class="text-gray-500 text-xs">
                      {{ community.members }}位成员
                    </p>
                  </div>
                </button>
              </div>
            </div>

            <!-- 活动日历 -->
            <EventCalendar/>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Swiper, SwiperSlide} from "vue-awesome-swiper";
import AdCarousel from "@/components/AdCarousel.vue";
import EventCalendar from "@/components/EventCalendar.vue";
import {
  projects,
  articles,
  communities,
  learningPaths,
  swiperOptions,
  slides,
  ads,
  adSwiperOptions
} from "@/mock/homeData";

export default {
  components: {
    Swiper,
    SwiperSlide,
    slides,
    AdCarousel,
    EventCalendar
  },
  mounted() {
    // 轮播图相关初始化已移至AdCarousel组件中
  },
  computed: {
    // currentAd计算属性已移至AdCarousel组件中
  },
  methods: {
    slides() {
      return slides
    },
    handleAdClick(ad) {

    },
    onSlideChange(index) {
      // 更新当前广告索引
      this.currentIndex = index;
    },
    handleEventClick(event) {
      // 处理活动点击事件
      console.log('活动点击:', event);
      // 这里可以添加跳转到活动详情页的逻辑
      // this.$router.push(`/events/${event.id}`);
    },
    toggleLike(article) {
      // 切换点赞状态
      article.liked = !article.liked;
      // 更新点赞数
      if (article.liked) {
        article.likes++;
      } else {
        article.likes--;
      }
    },
    prevSlide() {
      const swiper = this.$refs.mySwiper.$swiper;
      if (swiper) {
        swiper.slidePrev();
      }
    },
    nextSlide() {
      const swiper = this.$refs.mySwiper.$swiper;
      if (swiper) {
        swiper.slideNext();
      }
    }
  },
  data() {
    return {
      currentIndex: 0, // 当前广告索引
      swiperOptions: swiperOptions,
      projects: projects,
      articles: articles,
      communities: communities,
      learningPaths: learningPaths,
      ads: ads,
      adSwiperOptions: adSwiperOptions
    };
  }
};
</script>

<style>
/* Swiper container styles */
.swiper-container {
  width: 100%;
  height: 400px;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Swiper pagination styles */
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(127, 234, 169, 0.5);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #7feaa9;
}

/* Swiper navigation button styles */
.swiper-button-prev,
.swiper-button-next {
  color: #7feaa9;
  background: rgba(127, 234, 169, 0.2);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  backdrop-filter: blur(4px);
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 18px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: rgba(127, 234, 169, 0.3);
}

/* Hide default navigation buttons on mobile */
@media (max-width: 640px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}
</style>